<template>
	<view class="index page">
		<view class="header">
			<nav-bar title="活动风采详情"></nav-bar>
		</view>
		<view class="main">
			<view class="header">
				<view class="poster">
					<image src="" mode=""></image>
				</view>
				<view class="active-details">
					<view class="left">
						<view class="title">
							组织体能训练
						</view>
						<view class="style">
							<view class="tag">
								忠诚警队
							</view>
							<view class="type">
								德育
							</view>
						</view>
						<view class="time">
							时间:2023-02-01 12:00:00
						</view>
						<view class="addr">
							地点:织里镇公安分局
						</view>
						<view class="player">
							<view class="user" :style="{width:28* 3+42 + 'rpx'}">
								<view class="user-item" v-for="(item, index) in [1,2,3,4]" :key="index" :style="{left:(28) * index+'rpx'}">
									<image src="" mode=""></image>
								</view>
							</view>
							<text>等32人参加</text>
						</view>
					</view>
					<view class="right">
						<view class="praise">
							<image src="" mode=""></image>
						</view>
						<text>500人已赞</text>
					</view>
				</view>
			</view>
			<view class="conter">
				<view class="left">
					<image src="" mode=""></image>
				</view>
				<view class="right">
					<view class="partment">
						活动主办: XX部门
					</view>
					<view class="head">
						活动负责人: 张一一
					</view>
					<view class="phone">
						<view class="phone-icon">
							
						</view>
						<text>13245467881</text>
					</view>
				</view>
			</view>
			<view class="picture">
				<view class="list" v-for="(item, index) in [1,2,3]">
					<view class="item">
						<image src="" mode=""></image>
						<view class="praise-num">
							<text>200人觉得不错</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	@import "@/common/style/common.scss";
	.index{
		@include flex-c;
		background-color: #F8F8F8;
		>.header{
			flex:0 0 auto;
		}
		>.main{
			flex: 1 0 0;
			overflow: auto;
			>.header{
				background-color: #FFFFFF;
				.poster{
					width: 100%;
					height: 426rpx;
					image{
						width: 100%;
						height: 100%;
						background-color: red;
					}
				}
				.active-details{
					@include flex-r-between-center;
					padding: 24rpx 34rpx;
					color: #4A4A4A;
					font-size: 24rpx;
					.left{
						.title{
							color: #000000;
							font-size: 32rpx;
							line-height: 52rpx;
						}
						.style{
							@include flex-r-start-center;
							padding: 0 0 24rpx;
							font-size: 24rpx;
							.tag{
								padding: 0 4rpx;
								color: #F26363;
								line-height: 34rpx;
								background-color: #FEEEEE;
								border: 2rpx solid #F9A9A9;
								border-radius: 4rpx;
								margin: 0 8rpx;
							}
							.type{
								padding: 0 8rpx;
								background-color: #E32B3E;
								color: #FFFFFF;
								line-height: 34rpx;
								margin: 0 4rpx;
								border-radius: 4rpx;
							}
						}
						.time,.addr{
							line-height: 48rpx;
						}
						.player{
							padding: 22rpx 0 0;
							@include flex-r-start-center;
							.user{
								@include flex-r;
								position: relative;
								height: 42rpx;
								.user-item{
									position: absolute;
									@include avatar(42);
									background-color: red;
								}
							}
							text{
								display: flex;
								padding: 0 16rpx;
								font-size: 20rpx;
							}
						}
					}
					.right{
						@include flex-c-start-center;
						.praise{
							@include circle(60);
							border: #B9B9B9 solid 2rpx;
						}
						>text{
							padding: 14rpx 0;
							font-size: 24rpx;
							color: #4A4A4A;
						}
					}
				}
			}
			>.conter{
				margin: 16rpx 0;
				@include flex-r-start-center;
				padding: 24rpx 34rpx;
				background-color: #FFFFFF;
				.left{
					width: 216rpx;
					height: 192rpx;
					border-radius: 8rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
						background-color: red;
					}
				}
				.right{
					padding: 0 28rpx;
					color: #4A4A4A;
					font-size: 28rpx;
					font-size: 600;
					.partment,.head{
						line-height: 68rpx;
					}
					.phone{
						@include flex-r-start-center;
						.phone-icon{
							@include circle(34);
							background-color: #006CFF;
						}
						>text{
							padding: 0 12rpx;
						}
					}
				}
			}
			.picture{
				padding: 28rpx 34rpx;
				background-color: #FFFFFF;
				.list{
					padding: 0 0 28rpx;
					>.item{
						width: 100%;
						height: 252rpx;
						position: relative;
						image{
							position: relative;
							z-index: 1;
							width: 100%;
							height: 100%;
							background-color: red;
						}
						.praise-num{
							position: absolute;
							z-index: 2;
							bottom: 0;
							right: 0;
							color: #FFFFFF;
							font-size: 24rpx;
							padding: 10rpx 18rpx;
							background-color: #4A4A4A;
						}
					}
				}
			}
		}
	}
</style>